import Icon from '@/components/Icon'
import { TabBar } from 'antd-mobile'
import styles from './index.module.scss'

export default function Test() {
  return (
    <div className={styles.root}>
      <h1>测试页面</h1>
      <TabBar>
        <TabBar.Item key="1" title="首页" icon={<Icon type="iconbtn_home" />} />
        <TabBar.Item key="2" title="问答" icon={<Icon type="iconbtn_qa" />} />
        <TabBar.Item key="3" title="视频" icon={<Icon type="iconbtn_video" />} />
        <TabBar.Item key="4" title="我的" icon={<Icon type="iconbtn_mine" />} />
      </TabBar>

      <TabBar className="geek-tabbar">
        <TabBar.Item
          key="1"
          title="首页"
          icon={(active: boolean) => (active ? <Icon type="iconbtn_home_sel" /> : <Icon type="iconbtn_home" />)}
        />
        <TabBar.Item
          key="2"
          title="问答"
          icon={(active: boolean) => (active ? <Icon type="iconbtn_qa_sel" /> : <Icon type="iconbtn_qa" />)}
        />
        <TabBar.Item
          key="3"
          title="视频"
          icon={(active: boolean) => (active ? <Icon type="iconbtn_video_sel" /> : <Icon type="iconbtn_video" />)}
        />
        <TabBar.Item
          key="4"
          title="我的"
          icon={(active: boolean) => (active ? <Icon type="iconbtn_mine_sel" /> : <Icon type="iconbtn_mine" />)}
        />
      </TabBar>
    </div>
  )
}
